<template>
	<view>
		<!-- #ifdef APP-PLUS||H5 -->
		<titlebara mode="发动态" :backToIndex="false" :back="true" :text="text" backgroundColor='#f5f5f5'>
			<view slot="title">
				<image class="showMore" mode='aspectFit' src="https://dnsverify.pfmoto.com/appstatic/community/more.png"
					@click="showMore">

					<view v-if="content.length <= 0 && imgList.length <= 0" class="showMore titleCommentTouched_"
						@click="commentTouched">
						+发布
					</view>
					<view v-else class="showMore titleCommentTouched" @click="commentTouched">+发布</view>
					<view class="titleText">{{text}}</view>
			</view>
		</titlebara>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<titlebara mode="发动态" :backToIndex="false" :back="true" :text="text" backgroundColor='#f5f5f5'>
			<view slot="title">
				<view class="titleText">{{text}}</view>
			</view>
		</titlebara>
		<!-- #endif -->
		<view class="releaseState" :style="{'top':top+'px','height':'calc(100% - '+top+'px)'}">
			<view>
				<textarea v-model="content" maxlength="1000" placeholder="分享此时此刻美好心情" class="textarea" />
				<view>
					<view class="uploadImg" :style="'display:block'">
						<view class="imageList" v-for="(item, index) in fileList" :key="item.uuid">
							<UploadView v-show="fileList.length-1!=index || fileList[0].mediaType =='video'"
								:ref="'uploadView'+index"  :item="item"
								 @delete="uploadDelete" @error="uploadError"
								@success="uploadSuccess" @uploadPercent="uploadPercent" @transCover="transCover"
								:percent="item.percent?item.percent:0"
								:class="item.mediaType=='video'?'videoView':'uploadBtn'"></UploadView>
						</view>
						<!-- <view class="inputGreybg" v-if="fileList.length<=9 &&fileList.length>1">
							<image class="uploadImg" src="https://dnsverify.pfmoto.com/appstatic/community/addMedia.png"
								mode="scaleToFill" @click="selectMedia" />
						</view> -->
						<addButton class="inputGreybg" v-show="fileList.length<9 &&fileList.length>1"
							ref="addButtonRef" :chooseFileList="chooseFileList" :sourceFileList="fileList"
							@getChooseFile='getChooseFile' @selectMedia="selectMedia"></addButton>
					</view>

					<view class="topic">
						<view class="topic-item" v-for="(item,index) in selectTopic" :key="index">
							<image class="icon-left"
								src="https://dnsverify.pfmoto.com/appstatic/community/topic-icon.png" mode="aspectFill">
							</image>
							<text>{{item.name || ''}}</text>
							<image @click="deltopic(item)" class="close-topic"
								src="https://dnsverify.pfmoto.com/appstatic/community/close-topic.png"
								mode="aspectFill">
						</view>
					</view>
				</view>
			</view>
			<view class="footer">
				<view class="uploadTopic" @click="toSelectTopic()">
					<view class="topicName">
						<image class="s-topic" src="https://dnsverify.pfmoto.com/appstatic/community/s-topic.png"
							mode="">
						</image>
						<text>选话题</text>
					</view>
				</view>
				<view v-if="fileList.length<=9 && fileList[0].mediaType!=='video'" class="upload-img" @click="selectMedia">
					<image class="" src="https://dnsverify.pfmoto.com/appstatic/community/upload-img.png" mode="">
					</image>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view v-if="content.length <= 0 && imgList.length <= 0" class="commentTouched_" @click="commentTouched">
					+发布
				</view>
				<view v-else class="commentTouched" @click="commentTouched">+发布</view>
				<!-- #endif -->

			</view>
			<!-- 话题选择弹出框 -->
			<u-popup round="6" :show="show">
				<view class="action-wraper">
					<image @click="closePopup" src="https://dnsverify.pfmoto.com/appstatic/community/x.png" mode="">
					</image>
					<text>选择话题</text>
					<text @click="confirmTopic">确定</text>
				</view>
				<view class="popup">
					<u-search shape="square" :clearabled="false" @custom="custom" @change="changeData" v-model="topic"
						placeholder="请输入话题" searchIconSize="18" bgColor="#ededed" placeholderColor="#ADB0AE"
						searchIcon="https://dnsverify.pfmoto.com/appstatic/community/topic-icon.png" :showAction="true"
						actionText="取消">
					</u-search>
					<view class="topic s-topoc-item">
						<view class="topic-item" v-for="(item,index) in selectTopic" :key="index">
							<image src="https://dnsverify.pfmoto.com/appstatic/community/topic-icon.png"
								mode="aspectFill">
							</image>
							<text>{{item.name || ''}}</text>
							<image @click="deltopic(item)" class="close-topic"
								src="https://dnsverify.pfmoto.com/appstatic/community/close-topic.png"
								mode="aspectFill">
						</view>
					</view>
					<view class="" v-if="topicList.length>0">
						<view class="hot-topic-title">
							<text>热门话题</text>
						</view>
						<view class="hot-topic">
							<view @click="selectTopicItem(item)"
								:class="item.select == true ?'hot-topic-item select':'hot-topic-item'"
								v-for="(item,index) in topicList" :key="index">
								<view class="text">
									<image class="s-topic"
										src="https://dnsverify.pfmoto.com/appstatic/community/s-topic.png" mode="">
									</image>
									{{item.name || ''}}
								</view>
							</view>
						</view>
					</view>
					<view class="noData" v-else>
						<text>未搜索到相关话题？</text>
						<text @click="creatTopic">#创建话题</text>
					</view>

				</view>

			</u-popup>

		</view>

	</view>
</template>
<script>
	const guid = function() {
		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
			var r = Math.random() * 16 | 0,
				v = c == 'x' ? r : (r & 0x3 | 0x8);
			return v.toString(16);
		});
	}
	const app = getApp();
	const util = require('@utils/util.js');
	const network = require('@manager/network-manager.js');
	const dialog = require('@utils/dialog.js');
	import UploadView from '@components/UploadView/UploadView.vue'
	import wCache from '@utils/wCache.js'
	import titlebara from '@/components/titlebar/titlebar'
	import addButton from '@components/UploadView/addButton.vue'
	
	// #ifdef APP-PLUS
	const PluginModule = uni.requireNativePlugin("PluginModule");
	import { requestAndroidPermission , gotoAppPermissionSetting } from "@/utils/permission.js"
	// #endif
	//在script标签最前面声明拍摄视频需要的api
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext('myAudio');
	innerAudioContext.autoplay = true;


	export default {
		components: {
			UploadView,
			titlebara,
			addButton,
		},
		data() {
			return {
				top: app.globalData.statusBarHeight + 44,
				text: '发动态',
				show: false,

				selector: ['拍摄', '从手机相册选择'],
				showPicker: false,
				content: '',
				chooseFileList:[],
				fileList: [{
						type: 0,
						mediaType: 'add',
						url: '',
						path: '',
						uuid: util.createUidKey()
					}],
				topPagination: {
					loadMore: true,
					page: 1,
					totalPage: 1,
					limit: 10,
					length: 100
				},
				oldSelectTopic: [],
				topicList: [],
				imgList: [],
				selectTopic: [],
				topic: '',
				topicId: '',
				showUpload: false,
				showTopic: true,
				url: '',
				flag: false,
				poster: '',
				
				fengmian:''	


			};
		},
		onLoad(data) {
			// this.getJurisdiction()
		},
		onShow() {

			if (uni.getStorageSync('topic') != "") {
				this.selectTopic.push(uni.getStorageSync('topic'))
				uni.setStorageSync('topic', "")
			}
			app.trackPage(util.getNavigationBarTitle());

			// #ifdef APP-PLUS
			this.selector = ['拍摄', '从相册选择视频', '从相册选择照片']
			// #endif


		},
		created() {
			this.loadTopicList(true)
		},
		methods: {
			creatTopic() {
				if (util.isLogin(getApp())) {
					var params = {
						"name": this.search,
						"authorId": app.getUserId(),
						"createrType": 0
					}
					var uri = app.globalData.config.interfaces.URL_TOPIC_ADD;
					network.post(uri, params, 'json', {}, true).then(res => {
						uni.stopPullDownRefresh();
						if (res.code == 200) {
							this.selectTopic.push(res.data)

						} else {
							setTimeout(() => {
								wx.showToast({
									title: res.message,
									mask: true,
									icon: 'none',
									duration: 2000
								});
							}, 500);

						}
						uni.hideLoading()
					}).catch(res => {
						setTimeout(() => {
							wx.showToast({
								title: res.errMsg,
								mask: true,
								icon: 'none',
								duration: 2000
							});
						}, 500);
						uni.hideLoading()
					});


				} else {
					util.jumpLogin()
				}
			},
			changeData(val) {
				this.search = val
				this.loadTopicList(true, val)
			},
			closePopup() {
				this.show = false
				this.selectTopic = []
				this.topicList.map(item => {
					item.select = false
				})
			},
			confirmTopic() {

				this.show = false
				// this.oldSelectTopic = this.selectTopic
			},
			onNavigationBarButtonTap: function(e) {
				this.commentTouched()

			},
			selectTopicItem(row) {

				this.topicList.map(item => {
					if (item.uuid == row.uuid && item.select == false) {
						item.select = true
						this.selectTopic.push(item)
					}
				})

			},
			selectMedia() {
				var that = this
				uni.showActionSheet({
					itemList: that.selector,
					success: function(res) {
						that.confirm(res.tapIndex + 1)
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});

			},
			custom() {
				this.topic = ""
			},

			confirm(e) {
				if (this.fileList.length == 10) {
					uni.showToast({
						title: '最多9张图',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				// console.log(this.fileList[0].mediaType)
				var index = this.fileList.length - 1;
				// debugger
				// this.$refs['uploadView' + index][0].upload(e, "发动态")
				this.$refs.addButtonRef.upload(e, "发动态")
			},

			// 打开授权设置界面

			openSetting() {
				const _this = this
				let promise = new Promise((resolve, reject) => {
					uni.showModal({
						title: '授权',
						content: '请先授权获取摄像头权限',
						success(res) {
							if (res.confirm) {
								uni.openSetting({
									success(res) {
										if (res.authSetting['scope.camera']) { // 用户打开了授权开关
											resolve(true)
										} else { // 用户没有打开授权开关， 继续打开设置页面

										}
									},
									fail(res) {
										console.log(res)
									}
								})
							} else if (res.cancel) { //用户取消了。继续提示弹出dialog，让用户授权。会死循环

							}
						}
					})
				})
				return promise;
			},





			commentTouched() {

				if (this.flag) {
					return
				}
				if(this.fileList.length>0&&!this.fileList[0].url&&this.fileList[0].mediaType!= "add"){
					// uni.showToast({
					// 	title: '文件数据处理中',
					// 	duration: 3000,
					// 	icon: 'none'
					// })
					return
				}

				if (this.content)
					var type = ''
				var path = ''

				var that = this;

				var uri = app.globalData.config.BASE_URL + app.globalData.config.interfaces.URLULR_COMMUNTITY_CREATE;
				this.imgList = []
				for (let i in this.fileList) {
					if (this.fileList[i].url) {
						this.imgList.push(this.fileList[i].url)
					}
				}

				if (this.content.length <= 0 && this.imgList.length <= 0) {
					uni.showToast({
						title: '请输入动态内容',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				if (this.content.length > 1000) {
					uni.showToast({
						title: '最多输入1000字',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				var topicList = []

				this.selectTopic.map(item => {
					var obj = {
						id: item.uuid,
						topicName: item.name
					}
					topicList.push(obj)
				})
				var params = {
					authorId: app.getUserId(),
					imgList: this.imgList,
					typeTrend: this.fileList[0].mediaType == 'image' ? 1 : 2, //类型 （图片是1 视频是2）
					topicList: topicList,
					subType: 1,
					publisherFlag: 1,
					content: this.content, //内容
					publisher: app.globalData.userInfo.userName,
					urls: this.imgList,
					poster: this.poster
				}
				//debugger
				this.flag = true
				this.disabled = true
				network.post(uri, params, 'json').then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '发布成功',
							duration: 3000
						})
						that.clearData()
						app.globalData.workSwiper = 2
						setTimeout(() => {

							uni.switchTab({
								url: '/pages/community/community'
							});
						}, 500);
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
						this.disabled = false
					}
					that.flag = false
				}).catch(res => {
					that.flag = false
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
					this.disabled = false
				});
			},
			timeFromNow(time) {
				const format = "YYYY-MM-DD HH:mm:ss";
				const formatDate = "YYYY-MM-DD";
				const formatTime = "HH:mm:ss";
				let timeStr = this.$moment(time).format(format);
				if (this.$moment(time).format(formatDate) === this.$moment().format(formatDate)) {
					const fromNowStr = this.$moment(time).fromNow(true);
					if (fromNowStr.indexOf("小时") > 0 && parseInt(fromNowStr) > 5) {
						timeStr = "今天 " + this.$moment(time).format(formatTime);
					} else {
						timeStr = fromNowStr + "前"
					}
				}
				return timeStr
			},

			toSelectTopic() {


				this.show = true
				this.topicList.map(item => {
					this.selectTopic.map(v => {
						if (item.uuid == v.uuid) {
							item.select = true
						}
					})
				})
			},

			delImg(index) {
				console.log(index);
				this.fileList.splice(index, 1);
				console.log(this.fileList);
			},
			swichType(type) {

				if (type === 0) {
					this.showUpload = true;
				} else {
					this.showTopic = true;
				}
			},
			clearData() {
				this.fileList = [{
					type: 0,
					mediaType: 'add',
					url: '',
					path: '',
					uuid: util.createUidKey()
				}]
				this.content = ''

				uni.setStorageSync('topic', "")
				this.selectTopic = []

			},


			deltopic(row) {


				this.selectTopic.map((item, index) => {
					if (item.uuid == row.uuid) {

						this.selectTopic.splice(index, 1)

					}
				})
				this.topicList.map((item, index) => {
					if (item.uuid == row.uuid) {
						this.topicList[index].select = false

					}
				})
			},
			play() {
				console.log(1111);
			},
			uploadPercent(item) {

			},
			
			getChooseFile(files,type,poster){//得到上传的本地文件数组
				var _self=this
				// if(typeof(files)!=='string'){//app上传图片的话是数组
				// #ifdef APP-PLUS
				if(typeof(files)!=='string'){//app上传图片的话是数组
					var index = this.fileList.length-1;
					var i=0
					handleImg();
					function handleImg() {
						if (i >= files.length) {
							return;
						}
						_self.fileList.push({
							type: 0,
							mediaType: 'add',
							url: '',
							path: '',
							uuid: util.createUidKey()
						})
						// debugger
						_self.$refs['uploadView' + index][0].uploadFile(files[i],type,poster).then(
							res=>{
								//debugger
								if(res){
									index++
									i++
								}
								_self.uploadSuccess(res)
								handleImg();
							}
						)
						
						// var result=await _self.$refs['uploadView' + index][0].uploadFile(files[i],type,poster)
						// if(result){
						// 	index++
						// 	i++
						// }
						// _self.uploadSuccess(result)
						// handleImg();
					}
				}else{//视频
					var poster=poster || files
					var index = this.fileList.length-1;
					var i=0
					handleImg();
					async function handleImg() {
						if (i >= 1) {
							return;
						}
						if(type=='image'){
							_self.fileList.push({
								type: 0,
								mediaType: 'add',
								url: '',
								path: '',
								uuid: util.createUidKey()
							})
						}
						//debugger
						_self.$refs['uploadView' + index][0].uploadFile(files,type,poster).then(
							res=>{
								//debugger
								if(res){
									index++
									i++
								}
								_self.uploadSuccess(res)
								handleImg();
							}
						)
					}
				}
				// #endif
				//}else{//小程序上传图片和上传视频是字符串
				// #ifdef MP-WEIXIN
					var poster=poster || files
					var index = this.fileList.length-1;
					var i=0
					handleImg();
					async function handleImg() {
						if (i >= files.length) {
							return;
						}
						if(type=='image'){
							_self.fileList.push({
								type: 0,
								mediaType: 'add',
								url: '',
								path: '',
								uuid: util.createUidKey()
							})
						}
						//debugger
						_self.$refs['uploadView' + index][0].uploadFile(files[i],type,poster).then(
							res=>{
								//debugger
								if(res){
									index++
									i++
								}
								_self.uploadSuccess(res)
								handleImg();
							}
						)
						// if(result){
						// 	index++
						// 	i++
						// }
						// _self.uploadSuccess(result)
						// handleImg();
					}
				// #endif
				// }
			},
			transCover(cover){
				this.poster=cover
			},
			
			uploadSuccess(item) {
				var that=this
				//debugger
				that.fileList.splice(this.fileList.findIndex(x => x.uuid === item.uuid), 1, item)
				var data = JSON.parse(JSON.stringify(this.fileList))
				// that.fileList = []
				
				// this.$nextTick(function() {
				// 	debugger
				// 	that.fileList = data
				// 	uni.hideLoading()
				// })
				this.fileList.find(x => x.uuid === item.uuid).url = item.url;
				console.log(that.poster)
			},
			uploadError(item) {
				if (item.mediaType == 'video') {
					return
				}
				this.fileList.splice(this.fileList.findIndex(x => x.uuid === item.uuid), 1);
				
			},
			showMore() {

			},
			uploadDelete(item) {
				this.fileList.splice(this.fileList.findIndex(x => x.uuid === item.uuid), 1);
				if (item.mediaType == 'video') {
					this.fileList.push({
						type: 0,
						mediaType: 'add',
						url: '',
						path: '',
						uuid: util.createUidKey()
					})
				}
				
			},



			//上传照片
			loadTopicList(isRefresh, name) {
				var uri = app.globalData.config.interfaces.URL_TOPIC_LIST;
				if (name) {
					var params = {
						"pageNum": this.topPagination.page,
						"pageSize": 10,
						"authorId": app.getUserId(),
						"name": name
					};
				} else {
					var params = {
						"pageNum": this.topPagination.page,
						"pageSize": 10,
						"authorId": app.getUserId()

					};
				}

				network.get(uri, params, 'form').then(res => {

					uni.stopPullDownRefresh();

					if (res.code == 200) {
						res.data.list.map(item => {
							item.select = false
						})
						var _list = res.data.list;
						var topPagination = this.topPagination;

						if (isRefresh) {
							topPagination.totalPage = res.data.totalPage;
							topPagination.length = res.data.total;
							this.topPagination = topPagination
							this.topicList = _list ? _list : []
						} else {
							if (_list && _list.length > 0) {
								this.topicList = [...this.topicList, ..._list]

							}
						}

						var loadMore = true;

						if (topPagination.page == topPagination.totalPage) {
							loadMore = false;
						} else {
							loadMore = true;
						}

						this.topPagination.loadMore = loadMore
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},










		},
	};
</script>

<style lang="scss" scoped>
	.noData {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.noData text {
		font-size: 28rpx;
	}

	.noData text:first-child {
		color: #ADB0AE;
	}

	.noData text:last-child {
		color: #ea5454;
	}

	.titleText {
		color: #3D3A3A;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 600;
		font-size: 16px;
		align-items: center;
		display: flex;
		position: absolute;
		top: calc(50% - 10px);
		left: calc((100% - 40px)/2);
	}

	.titleCommentTouched {
		width: 60px;
		height: 30px;
		box-sizing: border-box;
		border-radius: 2px;
		text-align: center;
		line-height: 30px;
		align-items: center;
		font-size: 14px;
		color: #FFFFFF;
		border: 1px solid #EA5404;
		background-color: #EA5404;
		position: absolute;
		left: calc(100% - 84px - 16px);
		top: calc(50% - 16px);
	}

	/deep/ .uni-textarea-textarea {
		text-align: justify;
	}

	.titleCommentTouched_ {
		width: 60px;
		height: 30px;
		box-sizing: border-box;
		border-radius: 2px;
		text-align: center;
		line-height: 30px;
		align-items: center;
		font-size: 14px;
		color: #ADB0AE;
		border: 1px solid #EDEDED;
		background-color: #EDEDED;
		position: absolute;
		left: calc(100% - 84px - 16px);
		top: calc(50% - 16px);
	}

	.showMore {
		width: 60px;
		height: 30px;
		position: absolute;
		top: calc(50% - 15px);
		left: calc(100% - 70px);
	}

	.releaseState {
		width: calc(100vw - 60rpx);
		height: 100%;
		background: url("https://dnsverify.pfmoto.com/appstatic/my/my_icon_list_background.jpg") no-repeat;
		background-size: 100%, 100vh;
		position: absolute;
		/*#ifdef MP-WEIXIN*/
		top: 88px;
		/*#endif*/
		overflow-y: auto;

	}

	.popup {
		padding: 30rpx;
	}

	.action-wraper {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
	}

	.action-wraper text {
		font-size: 32rpx;
		font-weight: 600;
		color: #3d3a3a;
	}

	.action-wraper image {
		width: 48rpx;
		height: 48rpx;
	}

	/deep/ u-search {
		margin-bottom: 30rpx;
	}

	/deep/ .u-transition {
		height: 80vh;
	}

	.hot-topic {
		display: flex;
		flex-wrap: wrap;
	}

	.s-topoc-item .topic {
		display: block;
	}

	.hot-topic-title {
		margin-top: 30rpx;
	}

	.hot-topic-item {
		width: 50%;
		margin-top: 40rpx;

	}

	.hot-topic .select .text {
		color: #ADB0AE;

	}

	.hot-topic .select image {
		opacity: 0.3;
	}

	.hot-topic-item .text {
		display: inline-block;
		width: auto;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #3d3a3a;
		left: 0px;
		top: 0px;
		padding: 4rpx 20rpx;
		text-align: center;
		background: rgba(61, 58, 58, 0.1);
		border-radius: 4rpx;

	}

	.hot-topic-item image {
		width: 30rpx;
		height: 30rpx;
		position: relative;
		margin-right: 10rpx;
		top: 8rpx;
	}

	/deep/.u-popup .u-popup__content {
		height: 80vh;
		flex: 1 1 1 !important;
	}

	/deep/ .u-search__content__icon {
		background-image: url('https://dnsverify.pfmoto.com/appstatic/community/topic-icon.png');
		background-size: 28rpx 28rpx;
		background-repeat: no-repeat;
		background-position: 0 50%;
	}

	.topic {
		display: flex;
		margin-top: 40rpx;
		flex-wrap: wrap;
	}

	.topic-item {

		background: rgba(234, 84, 4, 0.1);
		border-radius: 4rpx;
		display: inline;
		padding: 4px 20rpx;
		margin-right: 30rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx
	}

	.upload-img image {
		width: 40rpx;
		height: 36rpx;
		margin-left: 20rpx;
		margin-top: 8rpx;
	}

	.topic .close-topic {
		width: 32rpx;
		height: 32rpx;
		margin-left: 6rpx;
	}

	.topic image {
		width: 24rpx;
		height: 24rpx;
	}

	.topic-item .icon-left {}

	.topic-item text {
		color: #EA5404;
		padding-left: 20rpx;
	}

	.hot-topic .s-topic {
		top: 4rpx;
	}

	.topic image {
		width: 24rpx;
		height: 24rpx;
	}

	.inputGreybg,
	.inputGreybg .uploadImg {
		width: 216rpx;
		height: 216rpx;
		display: inline-block;
	}

	.topicWraper {
		font-size: 28rpx;
		color: #828282;
		display: flex;

		padding: 40rpx 0;
		margin-top: 20rpx;
	}

	.releaseState {
		padding: 0 30rpx;

		.textarea {
			font-size: 28rpx;
			line-height: 160%;
			color: #333333;
			width: 100%;
			padding-top: 30rpx;
			height: 280px;

		}

		.uploadImg {
			margin-top: 40rpx;

			.videoClass {
				width: 100%;

				#myVideo {
					width: 100%;
				}
			}

			.imageList {
				margin: 6rpx 6rpx 0 0;
				display: inline-block;
				position: relative;

				.image {
					width: 216rpx;
					height: 216rpx;
					display: inline-block;
					border-radius: 20rpx;
				}

				.delImg {
					position: absolute;
					right: 8rpx;
					top: 8rpx;
					width: 40rpx;
					height: 40rpx;
					z-index: 2;
				}
			}

			.onlyImageList {
				.onlyImage {
					width: 100%;
					display: inline-block;
				}
			}
		}

		.uploadBtn {
			width: 216rpx;
			height: 216rpx;
			border-radius: 20rpx;
			display: inline-block;
		}

		.videoView {
			width: 672rpx;
			height: 522rpx;
			border-radius: 20rpx;
			display: inline-block;
			margin-bottom: 100rpx;
		}

		.uploadTopic {

			font-weight: bold;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #bdbdbd;
			display: flex;
			align-items: center;

			.topicName {

				display: inline-block;
				font-style: normal;
				font-weight: 400;
				width: 164rpx;
				height: 48rpx;
				line-height: 48rpx;
				font-size: 28rpx;
				color: #3d3a3a;
				margin-right: 70rpx;
				left: 0px;
				top: 0px;
				text-align: center;
				background: rgba(61, 58, 58, 0.1);
				border-radius: 4rpx;

				.s-topic {
					width: 30rpx;
					height: 30rpx;
					position: relative;
					left: -10rpx;
					top: 4rpx;
				}
			}

			.deltopic {
				width: 40rpx;
				height: 40rpx;
				margin-left: 6rpx;
				position: relative;
				top: 10rpx;
			}
		}

		.footer {
			position: fixed;
			bottom: 0px;
			left: 0;
			right: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: #f5f5f5;
			padding: 15px 23px;


		}

		.commentTouched {
			width: 84px;
			height: 32px;
			box-sizing: border-box;
			border-radius: 2px;
			text-align: center;
			line-height: 32px;
			align-items: center;
			font-size: 14px;
			color: #FFFFFF;
			border: 1px solid #EA5404;
			background-color: #EA5404;
			position: absolute;
			left: calc(100% - 84px - 16px);
			top: calc(50% - 16px);
		}

		.commentTouched_ {
			width: 84px;
			height: 32px;
			box-sizing: border-box;
			border-radius: 2px;
			text-align: center;
			line-height: 32px;
			align-items: center;
			font-size: 14px;
			color: #ADB0AE;
			border: 1px solid #EDEDED;
			background-color: #EDEDED;
			position: absolute;
			left: calc(100% - 84px - 16px);
			top: calc(50% - 16px);
		}
	}
</style>
